<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>BOX</title>
<script src="ui/js/jquery.min.js"> </script>
<style>
/*--------------------------------------华丽的分割线-----------------------------------  */
#d1{
/* -webkit-transform:skew(30deg,30deg); */
-webkit-transform: perspective(200px);
}
#fdiv1{
transform-style: preserve-3d; 
-webkit-transform: perspective(200px); 
}
</style>
</head>
<body>
<div id='fdiv'>
<div id='d1'>
<span>d1</span>
</div>
<div id='d2'>
<span>d2</span>
</div>
<div id='d3'>
<span>d3</span>
</div>
<div id='d4'>
<span>d2</span>
</div>
<div id='d5'>
<span>d5</span>
</div>
<div id='d6'>
<span>d6</span>
</div>
</div>
</body>
<script type="text/javascript">
for(var i=0;i<6;i++){
	$('#d'+(i+1)).css('width','100px');
	$('#d'+(i+1)).css('height','100px');
	i==0?$('#d'+(i+1)).css({'backgroundColor':'red','-webkit-transform':'rotateX(-33.5deg) rotateY(45deg)','margin-left':'200px','margin-top':'200px','position':'ralative;'}):null;
	i==1?$('#d'+(i+1)).css({'backgroundColor':'green','-webkit-transform':'rotateX(0deg) rotateY(0deg) translateY(-300px)','margin-left':'200px','margin-top':'200px','position':'ralative;'}):null;
	i==2?$('#d'+(i+1)).css({'backgroundColor':'gray','-webkit-transform':'rotateX(-33.5deg) rotateY(45deg)','margin-left':'200px','margin-top':'200px','position':'ralative;'}):null;
	i==3?$('#d'+(i+1)).css({'backgroundColor':'orange','-webkit-transform':'rotateX(-33.5deg) rotateY(45deg)','margin-left':'200px','margin-top':'200px','position':'ralative;'}):null;
	i==4?$('#d'+(i+1)).css({'backgroundColor':'blue','-webkit-transform':'rotateX(-33.5deg) rotateY(45deg)','margin-left':'200px','margin-top':'200px','position':'ralative;'}):null;
	i==5?$('#d'+(i+1)).css({'backgroundColor':'purple','-webkit-transform':'rotateX(-33.5deg) rotateY(45deg)','margin-left':'200px','margin-top':'200px','position':'ralative;'}):null;
	/* $('#d'+(i+1)).css('-webkit-transform','skew(30deg,30deg)'); */
	
}
</script>

</html>